<template>
    <div class="immobilization">
        <div class="move_left_box">
            <div class="move_left_box_content">
                <div class="move_left_box_content_toolbar">
                    <div class="move_left_box_content_title">
                        圈图
                    </div>
                    <div class="move_left_box_content_title_tools">
                        <!-- 任务记录 -->
                        <div class="task_record">
                            <span class="task_name">
                                任务记录：
                            </span>
                            <el-select v-model="taskValue" @change="changeTask">
                                <el-option v-for="item in taskOptions" :key="item.taskId" :label="item.taskName"
                                    :value="item.taskId">
                                </el-option>
                            </el-select>
                        </div>
                        <!-- 下载 -->
                        <div class="dropdown">
                            <el-dropdown @command="handleCommand">
                                <span class="el-dropdown-link">
                                    <i class="el-icon-download"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <!-- <el-dropdown-item command="JPG">下载JPG格式</el-dropdown-item> -->
                                    <el-dropdown-item command="PNG">下载PNG格式</el-dropdown-item>
                                    <!-- <el-dropdown-item command="PDF">下载PDF格式</el-dropdown-item> -->
                                    <el-dropdown-item command="SVG">下载SVG格式</el-dropdown-item>
                                    <el-dropdown-item command="resultFile">结果文件</el-dropdown-item>
                                    <!-- <el-dropdown-item command="result">结果表格</el-dropdown-item> -->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
                <div class="static_view">
                    <viewerCom :url="option.url" :key="option.url" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPageDrawRecordRequest, downloadDrawFileRequest } from '@/api/tools'
export default {
    name: 'GenescloudUiList',
    props: {
        option: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            taskOptions: [],
            taskValue: '',
        };
    },
    created() {
        this.init()
    },
    mounted() {

    },

    methods: {
        async init() {
            let pageCode = this.$router.history.current.name
            this.$store.commit('menu/SIDEBAR_MENU', 'chartOverview')
            const res = await getPageDrawRecordRequest(pageCode)
            if (res.code !== 200) return this.$message.error(res.message)
            this.taskOptions = res.data
            //判断是否从任务列表跳转过来
            if (this.$queryToObjectsearch(window.location.search).taskId) {
                this.taskValue = this.$queryToObjectsearch(window.location.search).taskId
            } else if (this.$route.params.taskId) {
                this.taskValue = this.$route.params.taskId
            } else {
                this.taskValue = res.data[0].taskId
            }
        },
        changeTask(value) {
            // this.$emit('taskChange', value)
            // let name = this.$router.history.current.name + 'taskId'
            // localStorage.setItem(name, value)
        },
        //下载
        async handleCommand(downloadType) {
            let name
            let pageCode = this.$router.history.current.name
            let params = {
                pageCode,
                taskId: this.taskValue,
                downloadType,
            }
            const res = await downloadDrawFileRequest(params)
            if (downloadType == 'result') {
                name = 'xls'
            } else if (downloadType == 'resultFile') {
                name = 'zip'
            } else {
                name = downloadType
            }
            this.$dropDown(res, this.downloadName + '.' + name)
        },
    },
};
</script>

<style lang="scss" scoped>
.immobilization {
    height: calc(100vh - 160px);

    .task_record {
        min-width: 300px;
        margin-right: 10px;

        ::v-deep .el-input__inner {
            display: flex;
            align-content: center;
            align-items: center;
            border-radius: 6px;
            height: 30px;
        }

        ::v-deep .el-input__icon {
            line-height: 30px;
        }
    }

    .el-dropdown-link {
        cursor: pointer;
        margin-right: 15px;
        display: block;
        color: #666;
        width: 26px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        font-size: 18px;
        background-color: #f0f0f0;
        border-radius: 2px;
    }

    .el-change-link {
        cursor: pointer;
        display: block;
        color: #666;
        height: 32px;
        padding: 0 6px;
        line-height: 32px;
        margin-right: 15px;
        background-color: #f0f0f0;
    }

    ::v-deep .el-tabs__content {
        min-width: 400px;
        overflow-x: auto;
    }
}
</style>